<template>
    <view class="content">
        <view class="main">
            <scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh;" :scroll-top="scrollTop"
                ref="myScrollView" show-scrollbar="false">
                <!-- 这里是页面其他内容 -->
                <view class="content-top fixed_top" :style="bgOpacity" id="content_top">
                    <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"
                        class="fixed_top" id="navBar" :style="shareRight">
                        <van-icon name="share-o" slot="right" @click="onSearch" />
                    </van-nav-bar>
                    <view class="tabBox" :class="{ top_display: !scrolling }" id="tabBox" :style="scrollMT">
                        <!-- <view class="tabs white">
                            <view class="tabbar-item tab-item" v-for="(ite, index) in tabBarList"
                                @click="changeTab(index, $event, ite.typeName)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ ite.typeName }}
                            </view>
                        </view> -->
                    </view>

                </view>
                <view class="main-container" ref="container"
                    :class="{ 'element_to_animate': isAnimated,'animate_class': isAnimated, }">
                    <!-- 商品图片  五张轮播 -->
                    <view class="goodsImg" ref="goodsImg">
                        <swiper class="top_swiper" autoplay="false" :indicator-dots="true"
                            indicator-active-color="#FFFFFF" :indicator-width="20" ref="webpage"
                            :current="currentSwiper" @change="changeSwiper($event)">
                            <swiper-item v-for="(swiper_item, s) in activityDetail.sliderImageList" :id="s" :key="s">
                                <img :src="swiper_item" alt="">
                            </swiper-item>
                        </swiper>
                        <!-- 数字五张 -->
                        <!-- <view class="swiper_item_num">{{ currentSwiperItem + 1 }} / {{ sliderImageList.length }}</view> -->
                    </view>
                    <!-- 活动信息 -->
                    <view class="goods_content" id="goods_content">
                        <span class="goods_detail">
                            <span class="text"> {{ activityDetail.title }} </span>
                        </span>
                        <view class="goods_tips" v-if="activityDetail.tagList.length>0">
                            <view class="tips_item" v-for="(item, index) in activityDetail.tagList" :key="index">{{ item
                                }} </view>
                        </view>
                        <view style="margin-top: 94rpx; ">
                            <view class="activityDate"> {{activityDetail.startTime}} - {{activityDetail.endTime}}
                            </view>
                            <view class="days">共{{activitiesInfo.activityDays}}天</view>
                        </view>
                        <!-- //活动地点 -->
                        <view class="activityAddress">
                            <view class="itemLeft">
                                <view class="activityDate"> {{activityDetail.address}} </view>
                                <view class="days">{{activityDetail.addressDetail}}</view>
                            </view>
                            <view class="itemRight" @tap="toMap(0)">
                                <view style="height: 17px; text-align: center; width: 100%;">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png"
                                        alt="" style="width: 16px; height: 16px;">
                                </view>
                            </view>
                        </view>
                        <!-- 活动报名情况及限制 -->
                        <view class="signUpStatus ">
                            <view class="itemLeft">
                                <view class="activityDate"> 已报名 {{activitiesInfo.registeredCount}} /
                                    {{activityDetail.count}} </view>
                                <view class="days">{{activityDetail.signUpStatusText }}</view>
                            </view>
                            <view class="itemRight" v-if="activitiesInfo.userAvatarList.length>0"
                                @tap="checkJoinMembers">
                                <view class="joinActMembers">
                                    <view class="joinUser_info"
                                        v-for="(item,index) in activitiesInfo.userAvatarList.slice(0,3)" :key="index"
                                        :class="index===0 ? 'left-image': 'middle-image'"
                                        :style="'z-index:'+ (Number(index)+1)">
                                        <img class="image-item" :src="item" alt="">
                                    </view>
                                </view>
                                <van-icon name="arrow" size="11" style="margin-left: 25rpx;" />
                            </view>
                        </view>
                    </view>

                    <!-- 活动发起人 -->
                    <view class="actOrganizer">
                        <view class="title">活动发起人</view>
                        <view class="organizerInfo" @tap="toShequInfo">
                            <view class="organizerInfo_left">
                                <view class="organizerImg">
                                    <img :src="activitiesInfo.organizeravatarUrl ?activitiesInfo.organizeravatarUrl: defaultAvatar" alt="">
                                    <view class="logo"><img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png"
                                            alt=""></view>
                                </view>
                                <view class="info">
                                    <view class="nickName">{{activityDetail.organizerName}}</view>
                                    <view class="jobTitle">{{activityDetail.organizerOrgName}}</view>
                                </view>
                            </view>
                            <view class="organizerInfo_right">
                                <van-button class="guanzhu" type="default">关注</van-button>
                            </view>
                        </view>
                    </view>
                    <!-- 活动介绍 -->
                    <view class="activityIntroduction">
                        <view class="title">活动介绍</view>
                        <view class="introductionContent">
                            {{activityDetail.description}}
                        </view>
                    </view>

                    <!-- 温馨提示 -->
                    <view class="warmReminder">
                        <view class="title">温馨提示</view>
                        <view class="warmReminderContent">
                            <rich-text :nodes="activityDetail.prompt"></rich-text>
                            <!-- 1.活动由发起人自行发起，17乐生活仅提供活动展示空间，请大家仔细甄别活动的真实性、有效性、安全性。所有运动、户外等具有相关风险的活动请确认购买保险；
                            2.此活动报名后不可取消，报名积分不予退还；
                            3.若活动发起人取消活动，系统通知你活动取消并退还积分。 -->
                        </view>
                    </view>

                    <!-- 地图 -->
                    <view class="map">
                        <map style="width: 100%; min-height: 230px;" id="myMap" scale="10" show-location="true"
                            enable-3D="true" enable-scroll="true" enable-poi="true" :latitude="latitude"
                            :longitude="longitude" :markers="allMarkers" @markertap="markertap" @callouttap="callouttap"
                            @labeltap="labeltap" @tap="mapTap">
                        </map>
                    </view>
                    <!-- 评论 -->
                    <view class="reviewWrapper" v-if="hasData">
                        <view class="title">最新评论</view>
                        <!-- 评论列表 -->
                        <view class="reviewList" v-if="comments.length >0">
                            <view class="comment-item" v-for="(item,index) in comments.slice(0,2)" :key="index">
                                <view  @tap="toJudgeDetail(item)">
                                    <view class="user-info">
                                        <view class="user-info-left" style="display: flex; align-items: center;">
                                            <img :src="item.wxUserInfo.avatarUrl ? item.wxUserInfo.avatarUrl :defaultAvatarUrl"
                                                alt="">
                                            <view class="user-name">{{ item.wxUserInfo.nickName }}</view>
                                        </view>
                                        <template v-show="false">
                                            <van-button size="mini" class="guanzhu" type="default">{{item.follow ==
                                                true? '已关注' : '关注'}}</van-button>
                                        </template>
                                    </view>
                                    <view class="comment-content">{{ item.content }}</view>
                                </view>
                                <view class="image-container"
                                    v-if="item.attachment && item.judgeImages.length > 0"  @tap="toJudgeDetail(item)">
                                    <view class="imgInfo" v-for="(i,j) in item.judgeImages.slice(0,4)" :key="j">
                                        <img width="330rpx" height="330rpx" :src="i" />
                                    </view>
                                </view>
                                <view class="comment-footer">
                                    <view class="time"  @tap="toJudgeDetail(item)">{{ item.formattedPublishTime }}</view>
                                    <view class="interaction">
                                        <van-icon name="chat-o" style="margin-right: 8rpx;" size="15" />
                                        <view class="count" style="margin-right:40rpx;">{{ item.commentCount }}</view>
                                        <view style="margin-right: 8rpx;" @tap.stop="handlerLike(item)">
                                            <van-icon name="good-job-o" size="15" style="color:#888888 !important;"
                                                v-if="!item.currentUserLike" />
                                            <van-icon name="good-job" size="15" style="color:#FF6203 !important;"
                                                v-if="item.currentUserLike" />
                                        </view>
                                        <view class="count">{{ item.likeCount }}</view>
                                    </view>
                                </view>
                            </view>
                            <view class="more-comments" @tap="showAllComment"> 查看更多评论 <van-icon name="arrow"
                                    color="#ff6203" />
                            </view>
                        </view>
                        <!-- 评论列表为空 -->
                        <view class="reviewList" v-else>
                            <view class="no-comment">暂无评论</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="bottom" v-if="isSignedUp == false">
            <template v-if="activityDetail.status == 3">
                <van-button type="default" class="" disabled>活动已结束</van-button>
            </template>
            <template v-else>
                <van-button type="primary" class="button" @click="toRegisterAct"
                    v-if="Number(activityDetail.joinPeopleNum)< Number(activityDetail.peopleNum)  || activityDetail.status == 1">立即报名</van-button>
                <van-button type="default" class="checkBtn"
                    v-if="Number(activityDetail.joinPeopleNum)===Number(activityDetail.peopleNum) || activityDetail.status == 2">报名已满</van-button>
                <van-button type="default" class="" @tap="toRegisterAct"
                    v-if="Number(activityDetail.joinPeopleNum)===Number(activityDetail.peopleNum) || activityDetail.status == 4">报名已取消</van-button>
            </template>
        </view>
        <template v-else>
            <view class="btn-area" v-if="isParticipated == false && activityDetail.status !== 3">
                <button plain class="submitBtn" @click="checkedMyActivity">查看行程单</button>
                <button plain class="checkBtn" open-type="share" @tap="shareMyFriends">分享给好友</button>
            </view>
            <view class="bottom" v-if="isParticipated == false && activityDetail.status === 3">
                <!-- 该活动 已参加 并且已结束 可显示可不显示 -->
                <van-button type="default" class="">活动已结束</van-button>
            </view>
            <view class="bottom" v-if="isParticipated == true ">
                <!-- 1、该活动没有评论时 才显示晒图 已参加  2、活动报名的场次已经结束了 才能晒图-->
                <van-button type="primary" class="" @tap="toShowPic" v-if="comments.length == 0 && showShareButton">晒图</van-button>
            </view>
        </template>
    </view>
</template>

<script>

import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
import {getActivityDetailApi,getCommentListApi} from '@/api/activity'
import { likeCommentApi } from '@/api/judge'
import Toast from '@/wxcomponents/vant/toast/toast'
import { PAGE_TYPE } from '@/utils/constant'
import {authMixin} from '@/utils/isLogin'
import { formatRelativeTime } from '@/utils/time-format-utility';


export default {
    components: { },
    data () {
        return {
            defaultAvatar:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultAvatar.png',
            navBarTitle:'',
            menuButtonWidth:'',  //页面右侧按钮的宽度
            shareRight:'',  //图标右侧距离
            latitude: 35.101902,
            longitude: 111.071467,
            title: '产品详情',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            scrollMT: '',
            scrollView: '',
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            listTop: 0,
            detailTop: 0,
            value1: 0,
            value2: 'a',
            currentIndex: 0, // 滚动时页面顶部出现的Tab
            isTruncated: true, // 商品标题显示
            lineClamp: 2,
            couponShow: false, // 优惠券弹窗
            xiajia: false,
            isShouQing: false,
            showSpecsPopup: false, // 规格弹窗
            buttonStatus: 0, // 点击加入购物车 或者 立即购买  传入的按钮内容标志
            removePopup: false, // 下架商品弹窗
            currentSwiperItem: 0, // 页面最顶部 商品图片轮播图 当前页面
            defaultAvatarUrl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultAvatar.png",
            activitiesInfo:{
                organizeravatarUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png', //活动发起人头像
                registeredCount:0,
                userAvatarUrls:'',
                userAvatarList:['https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png'],
            },
            activityDetail:{
                id:1,
                title:'信合名都社区水岸华庭东郡亲子活动游戏活动',
                startTime:'10月1日0:00',
                endTime:'11月30日23:55',
                term:'仅限东郡小区业主报名',
                organizerName:'端木逢春',
                organizerId:'',
                organizerOrgName:'东郡·水岸华庭物业', //jobTitle
                organizerOrgId:'',
                image:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                // introductionContent 
                description:"本次活动旨在为老人和孩子们提供一个欢乐的互动平台让大家在游戏中感受亲情的温暖，增强家庭凝聚力。活动将设置多个有趣的亲子游戏环节，让大家在游戏中体验亲子互动的乐趣，无需签到",
                // warmReminder 温馨提示  prompt
                prompt:'<p style="padding-bottom:10rpx;"> <a style="color:red;margin-right:5px;">1.</a>社群活动由发起人自行发起，蔚来仅提供活动展示空 间，请大家仔细甄别活动的真实性、有效性、安全性。所有运动、户外等具有相关风险的活动请确认购买保险；</p> <p style="padding-bottom:10rpx;"><a style="color:red;margin-right:5px;">2.</a>此活动报名后不可取消，报名积分不予退还；</p> <p><a style="color:red;width:20rpx;margin-right:5px;">3.</a>若活动发起人取消活动，系统将通知你活动取消并退还积分。</p>',
                joinPeopleNum:0,   //已参与人数
                count:100,  //可报名人数100人
                address:'东郡·水岸华庭小区西门小广场',
                addressDetail:"运城市盐湖区河东东街5088号",
                imageList:[],
                joinMembersList:[],
                sliderImageList: [
                    'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/goods_de.png', 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/banner_bg.png', 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/goods_de.png'
                ],
                tagList: [ '亲子活动','支持邀请好友' ],
                handle:0,
                status:0, // 活动状态( 0未发布 1报名中  2报名已满 3已结束 4已取消 )

            },
            joinMembersList:['https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png'],

            comments: [
                {
                    avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                    name: '赵楠',
                    follow: false,
                    content: '带上我的无压在一起吧，我需要呼吸山间的空气！',
                    images: [
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                    ],
                    time: '刚刚',
                    commentCount: 19,
                    likeCount: 19
                },
                {
                    avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                    name: 'Cool Marlon',
                    follow: true,
                    content: '25年春节档有多部大片上映，如《封神榜》《哪吒2》《射雕英雄传之侠之大者》，我个人最推荐的肯定就是《哪吒2》。',
                    images: [
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png',
                        'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png'
                    ],
                    time: '50分钟前',
                    commentCount: 19,
                    likeCount: 19
                }
            ],
            params:{},
            activitiesId:undefined,  //活动ID
            organizerOrgId:undefined,  //活动发起人ID
            tabHeight: 118,
            navHeight: uni.getStorageSync('navHeight'), // 顶部导航栏的高度
            fromEarnPoints: false, // 从积分页面跳转过来
            signUpActId:undefined,  //报名活动ID
            isSignedUp:false,  //是否已报名
            isParticipated:false,  //是否已参加活动
            comments:[],  //评论列表
            pageNum:1,
            pageSize:10,
            total:0,
            commentId:undefined,  //评论ID
            pageType:PAGE_TYPE.FIND,
            replyId:undefined,  //回复ID
            hasData:false,  //是否有评价数据
            showShareButton: false, // 是否显示晒图按钮

            allMarkers: [],

        }
    },
    onShareAppMessage(){
        return{
            title:'快来看看这场活动',
            path:`/pages/find/index?activitiesId=${this.activitiesId}`,
            imageUrl:this.activityDetail.sliderImageList[0],
            success: function (shareRes) {
                console.log('分享成功', shareRes);
                this.logShareAction();
                Toast.success('分享成功');
            },
            fail: function (err) {
                console.log(err);
            }
        }
    },
    computed: {
        // filteredJudgeArray() {
        //     return this.userJudgeData.filter(item =>  item.pics &&item.pics!==null && item.pics.length>0);
        // }
    },
    onLoad (data) {
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        console.log('胶囊按钮宽度：', menuButtonInfo.width);
        console.log('胶囊按钮高度：', menuButtonInfo.height);
        this.menuButtonWidth = menuButtonInfo.width
        this.shareRight='padding-right:'+ ( this.menuButtonWidth + 5 ) +'px' + '!important'
        // this.getActivitiesDetailsMethod(33)

        // 取到路由携带的参数
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params) || '{}')
            console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('params', this.params)
            this.activitiesId = this.params?.activitiesId
            this.fromEarnPoints = this.params?.fromEarnPoints || false
            this.isSignedUp = this.params?.isSignedUp || false
            this.pageType = this.params.pageType || PAGE_TYPE.FIND
        }

    },
    onReady () {
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })
    },
    onShow(){
        this.getActivitiesDetailsMethod(this.activitiesId)
    },
    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁前清除定时器，防止内存泄漏
    },
    methods: {
        formatTime(timestamp) {
            return formatRelativeTime(timestamp);
        },

        handleScroll (e) {
            console.log('顶部滚动距离', e.detail.scrollTop)
            this.old.scrollTop = e.detail.scrollTop

            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
                // this.scrollMT = 'margin-top: 486px'
            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
                this.scrollMT = 'margin-top:90px;'
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)
        },

        // 商品图片轮播图事件
        changeSwiper (e) {
            this.currentSwiperItem = e.detail.current // 指示点随着轮播图动
        },
        // 点击轮播图上指示点
        swiperDot (index) {
            // console.log(index,'index currentDot')
            this.currentSwiper = index // 轮播图随着指示点动
        },

        // 返回的箭头
        onClickLeft () {
            if(this.pageType == PAGE_TYPE.FIND){
               uni.reLaunch({url:'/pages/activityModule/activitiesList?params='+encodeURIComponent(JSON.stringify({pageType:PAGE_TYPE.FIND}))})
            }else if(this.pageType == PAGE_TYPE.MINE){
                uni.reLaunch({url:'/pages/activitiesList?params='+encodeURIComponent(JSON.stringify({pageType:PAGE_TYPE.MINE}))})
            }else{
                uni.navigateBack()
            }
        },

        getSignupRestrictionText(signupRestriction,community) {
            switch (signupRestriction) {
                case "0": return "全员可报名";
                case "1": return "小区业主可报名";
                case "2": return `${community}小区业主可报名`;
                default: return "未知限制";
            }
        },
        // 参与人员
        checkJoinMembers(){
            const params = {
                activitiesId: this.activitiesId,
            }
            uni.navigateTo({
                url:"/pages/activityModule/joinMembers?params="+encodeURIComponent(JSON.stringify(params))
            })
        },
        // 去分享
        toShareProduct() {
            console.log('Fenxiang' )
            // 调用微信小程序的分享方法
            // debugger
            uni.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage']
            })
            return {
            title: '分享标题',
            path: 'pages/index/index',
            success: function (shareRes) {
                // 分享成功后的回调
                uni.getShareInfo({
                    shareTicket: shareRes.shareTicket,
                    success: function (infoRes) {
                        console.log(infoRes);
                        // 在这里可以处理获取到的分享信息，比如加密数据encryptedData和初始向量iv等
                        // 这些数据可以用于一些后端解密操作或者统计分享来源等用途
                    },
                    fail: function (err) {
                        console.log(err);
                    }
                });
            },
            fail: function (err) {
                console.log(err);
            }
        };
        },

        // 去报名
        toRegisterAct(){
            authMixin() // 登录验证

            uni.navigateTo({
                url: `/pages/activityModule/activityRegist?params=${encodeURIComponent(JSON.stringify({
                    fromEarnPoints: this.fromEarnPoints,
                    activitiesId: this.activitiesId,
                    pageSymbol:'actDetail',
                    pageType:this.pageType,
                }))}`
            })
        },
        // 去晒图
        toShowPic(){
            uni.navigateTo({
                url: `/pages/userJudges/oneJudge?params=${encodeURIComponent(JSON.stringify({
                    signUpActId: this.signUpActId,
                    pageSymbol:'actDetail',
                    pageType:this.pageType,
                }))}`
            })
        },
        // 社区主页
        toShequInfo(){
            const params = {
                orgId: this.organizerOrgId,
            }
            uni.navigateTo({
                url:"/pages/activityModule/shequHomepage?params="+encodeURIComponent(JSON.stringify(params))
            })
        },

        // 查看更多评论
        showAllComment() {
            uni.navigateTo({
                url: '/pages/activityComment/allCommentPage?params=' + encodeURIComponent(JSON.stringify({
                    activitiesId: this.activitiesId,
                    pageType:this.pageType,
                }))
            })
        },
        // 查看行程单
        checkedMyActivity() {
            uni.navigateTo({
                url: '/pages/activityModule/registResult?params=' + encodeURIComponent(JSON.stringify({
                    signUpActId: this.signUpActId
                }))
            })
        },
        // 跳转用户详情
        toJudgeDetail(item) {
            const params = {
                pageSymbol: 'activityDetailCommentList',
                replyId: item.id,
                activitiesId: this.activitiesId,
                pageType: this.params.pageType,
            }
            uni.navigateTo({
                url:
                    '/pages/activityComment/commentDetails?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        // 活动评论点赞
        // 点赞
        handlerLike(item) {
            console.log(item)
            item.currentUserLike = !item.currentUserLike
            if (item.currentUserLike) {
                item.likeCount++
            } else {
                item.likeCount--
            }
            console.log(item,'change')
            this.replyId = item.id
            this.likeComment(item.id)
        },


        // 接口
        // 活动详情
        getActivitiesDetailsMethod (activitiesId) {
            return new Promise((resolve, reject) => {
                getActivityDetailApi(activitiesId).then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                      this.activitiesInfo = res.data
                      this.activityDetail = res.data?.activities
                      this.organizerOrgId = res.data.activities.organizerOrgId //活动发起人ID
                      this.activityDetail.sliderImageList = res.data?.activities?.images?.split(',') || 0
                      this.activitiesInfo.userAvatarList = (res.data?.useravatarUrls|| '').split(',').filter(Boolean) || this.joinMembersList
                      console.log(this.activitiesInfo.userAvatarList)
                      const community = res.data.activities.community
                      this.activityDetail.tagList = (res.data?.activities?.tags || '').split(',').filter(Boolean)
                      this.activityDetail.signUpStatusText = this.getSignupRestrictionText(res.data.activities.signupRestriction,community)
                    //   this.latitude = parseFloat(res.data.activities.latitude)
                    //   this.longitude = parseFloat(res.data.activities.longitude)
                      this.isSignedUp = res.data?.isSignedUp || false
                        if (this.isSignedUp) { //已报名  有报名id
                            this.signUpActId = res.data?.activitySignup.id || 0
                        }
                    this.isParticipated = res.data?.isParticipated || false
                    this.showShareButton = res.data?.showShareButton || false // 是否显示晒图按钮  报名参与的场次结束
                    this.allMarkers = [{
                        id: 0,
                        latitude:  Number(this.activityDetail.latitude),
                        longitude: Number(this.activityDetail.longitude),
                        iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png',
                        width: 16,
                        height: 21,
                        callout: {
                            content: this.activityDetail.address,
                            color: '#ffffff',
                            fontSize: 12,
                            borderWidth: 2,
                            borderRadius: 12,
                            bgColor: '#FF6203',
                            padding: 2,
                            display: 'ALWAYS',
                            textAlign: 'center'
                        }
                    }]
                    this.getCommentListMethod() 
                        resolve(res)
                    } else {
                        reject(res)
                    }
                })
            })
        },
     
        // 获取评论列表
        getCommentListMethod () {
            const params ={
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                activitiesId:this.activitiesId,  //活动ID
                // commentId:undefined,  //评论ID
            }
            return new Promise((resolve, reject) => {
                getCommentListApi(params).then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        const processedList = res.data.list.map(item => ({
                            ...item,
                            formattedPublishTime: this.formatTime(item.publishTime)
                        }));

                        // 修改点2: 正确合并分页数据
                        this.comments = this.pageNum === 1
                            ? processedList
                            : [...this.comments, ...processedList];

                        this.total = res.data?.total || 0
                        this.comments.forEach((item,index) =>{
                            if (item.attachment) {
                                item.judgeImages = item.attachment.split(',') || []
                            } else {
                                item.judgeImages = []
                            }
                        })
                        this.hasData = this.comments.length > 0
                        resolve(res)
                    }
                })
            })
        },
        // 点赞  取消点赞
        likeComment(replyId){
            return new Promise((resolve, reject) => {
                const params={
                    commentId:replyId,
                    interactionsTargetType:'post'
                }
                likeCommentApi(params).then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        console.log('res-----', res.data)
                        resolve(res)
                    } else {
                        reject(res)
                    }
                })
            })
        },
       

    }
}

</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}

.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // height: 100vh;
    height: calc(100vh - 63px);
    overflow-y: auto;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;

}

.main {
    position: relative;
    // margin-bottom:36px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}

.tabBox {
    position: relative;
    margin-top: 90px;
    // border-bottom: 1px solid #E0E0E0;
}

.content-top {
    .tabs {
        margin-bottom: 12px;
        // 需修改 原来是20px
        padding-left: 10px;
        padding-right: 10px;
        height: 16px;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .white {

        .tab-item {
            font-size: 28rpx;
            // font-weight: bolder;
            color: #666666;
        }

        .tabbar-item {
            flex: auto;
            z-index: 1;
            text-align: center;

            &.active {
                font-style: normal;
                font-weight: bolder;
                font-size: 32rpx;
                line-height: 32rpx;
                color: #111111;
            }
        }
    }
}

.main-container {
    // position: absolute;
    background: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;
    padding-bottom: 144rpx;
}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}

// 动画效果
.element_to_animate{
    transition: all 0.5s ease;
    animation-duration: 1s; /* 动画时长为1秒 */
    animation-timing-function: ease; /* 动画的时间函数，这里是缓动效果 */
}
.animate_class{
    transform: translateY(-20px);
}

.goodsImg {
    position: relative;
    width: 100%;
    height: 375px;

    .top_swiper {
        display: block;
        height: 375px;
    }

    img {
        width: 100%;
        height: 375px;
    }
}

.swiper_item_num {
    position: absolute;
    bottom: 15px;
    right: 18px;
    border-radius: 25px;
    background: rgb(0, 0, 0, 0.5);
    padding-left: 12px;
    padding-right: 12px;
    height: 25px;
    line-height: 25px;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
}

.status_tips {
    position: absolute;
    width: 100%;
    height: 108rpx;
    line-height: 108rpx;
    background: rgb(240, 240, 240, 0.6);
    bottom: 0rpx;
    align-items: center;
    font-size: 28rpx;
    text-align: center;
    color: #666666;
}
.group_status_tips{
    position: absolute;
    width: 100%;
    height: 108rpx;
    line-height: 108rpx;
    background:#FF6203;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    text-align: center;
    color: #666666;

    .status_tips_left{
        padding-left: 48rpx;
        text-align: left;

        .joinPeopleNum{
            font-size: 24rpx;
            color: #ffffff;
            line-height: 24rpx;
        }
        .stopTimeTips{
            margin-top: 8rpx;
            font-size: 24rpx;
            color: #ffffff;
            font-weight: bolder;
            line-height: 24rpx;
        }
    }
    .status_tips_right{
        padding-right: 48rpx;
        font-size:24rpx;
        text{
            display: inline-block;
            width:38rpx;
            height: 38rpx;
            line-height: 38rpx;
            color: #FF6203;
            background-color: #ffffff;
            font-size:24rpx;
            text-align: center;
            border-radius: 2px;
        }
        span{
            color: #ffffff;
            margin-right: 10rpx;
            margin-left: 10rpx;
        }
    }
}

.goods_content {
    background: #ffffff;
    padding: 66rpx 48rpx 50rpx 48rpx;
}

//商品标题
.goods_detail {
    width: 100%;
}

.text {
    color: #111111;
    font-size: 44rpx;
    text-align: left;
    line-height: 30px;
}

.ellipsis {
    -webkit-line-clamp: initial;
    max-height: none;
}

.icon {
    position: absolute;
    right: 0px;
    bottom: 0px;

    img {
        width: 11px;
        height: 6px;
    }
}

.goods_tips {
    display: flex;
    margin-top: 18px;
    justify-content: flex-start;
}

.tips_item {
    height: 54rpx;
    line-height: 54rpx;
    font-size: 24rpx;
    text-align: center;
    color: #666666;
    padding-left: 24rpx;
    padding-right: 24rpx;
    margin-right: 17rpx;
    background: #f7f7f7;
}
.activityDate{
    font-size: 32rpx;
    text-align: left;
    color: #111111;

    font-weight: bolder;
}
.days{
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #111111;
}

// 活动地址
.activityAddress{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 52rpx;

   .itemRight {
        width: 58px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

}
// 报名详情+限制
.signUpStatus{
    margin-top: 54rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .itemRight{
        display: flex;
        align-items: center;

        .joinActMembers{
            display: flex;
            align-items: center;
            // position: relative;
            .joinUser_info{
                position: relative;
                width: 44rpx;
                height: 44rpx;
                background: rgb(255, 255, 255);
                border-radius: 50%;
            }
            .image-item{
                position: absolute;
                border-radius: 50px;
                left: 1rpx;
                top: 1rpx;
                width: 40rpx;
                height: 40rpx;
                // line-height: 40rpx;
            }

            .left-image{
                // position: absolute;
                // left: 0px;
                z-index: 1; /* 设置层级，保证可以被右边图片覆盖一部分 */
            }
            .middle-image{
                margin-left: -10rpx; /* 负值，让其向左覆盖左边图片一部分，可调整数值来控制覆盖程度 */
                // z-index: 2; /* 层级比左边高，覆盖左边 */
            }
            .right-image{
                margin-left: -10rpx; /* 负值，让其向左覆盖中间图片一部分，可调整数值来控制覆盖程度 */
                z-index: 3; /* 层级比中间高，覆盖中间 */
            }
        }
    }
}

// 活动发起人
.actOrganizer{
    margin-top: 107rpx;
    padding: 0px 48rpx;
    .organizerInfo{
        margin-top: 50rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .organizerInfo_left{
            display: flex;
            align-items: center;

            .organizerImg{
                width: 76rpx;
                height: 76rpx;
                position: relative;
                border-radius: 50%;
                img{
                    width: 100%;
                    height: 76rpx;
                    border-radius: 50%;
                }
                .logo{
                    width: 34rpx;
                    height: 34rpx;
                    position: absolute;
                    line-height: 34rpx;
                    bottom: 0px;
                    right: 0px;
                    background-color: #ffffff;
                    text-align: center;
                    border-radius: 50%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    img{
                        line-height: 30rpx;
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }

            .info{
                margin-left: 15rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                
                .nickName{
                    font-size: 28rpx;
                    line-height: 28rpx;
                    text-align: left;
                    color: #111111;
                }
                .jobTitle{
                    margin-top: 10rpx;
                    font-size: 22rpx;
                    line-height: 22rpx;
                    text-align: left;
                    color: #666666;
                }
            }
        }
        .organizerInfo_right{
            .guanzhu {
                width: 100rpx !important;
                height: 44rpx !important;
                line-height: 44rpx;
            }
        }
        
    }
}
.guanzhu {
    width: 100rpx !important;
    height: 44rpx !important;
    line-height: 44rpx;
}
// 关注按钮
::v-deep .guanzhu .van-button--default {
    font-size: 22rpx;
    width: 100rpx;
    height: 44rpx;
    border-radius: 50rpx;
    // background: #D4D4D4 !important;
    border: 1px solid #D4D4D4 !important;
}
// 活动介绍
.activityIntroduction{
    padding: 0px 48rpx;
    margin-top: 88rpx;

    .introductionContent{
        margin-top: 62rpx;
        font-size: 28rpx;
        color: #666666;
    }
}
// 温馨提示
.warmReminder{
    margin-top: 102rpx;
    padding:0rpx 48rpx ;

    .warmReminderContent{
        margin-top: 63rpx;
        font-size: 28rpx;
        color: #666666;
        min-height: 183rpx;
    }
}
// 各模块公用标题
.title{
    font-size: 38rpx;
    text-align: left;
    color: #111111;
    line-height: 38rpx;
}
// 地图
.map{
    margin-top: 90rpx;
    padding: 0rpx 48rpx 0rpx 48rpx;
}

// 评论
.reviewWrapper {
    padding: 40rpx 48rpx;
    .title {
        font-size: 36rpx;
        text-align: left;
        color: #333;
        font-weight: bold;
    }

    // 评论列表
    .reviewList{
        margin-top: 40rpx;
    }
    .comment-item {
        margin-bottom: 64rpx;
        background-color: white;
        border-radius: 8rpx;
        overflow: hidden;
    }
    .comment-item:last-child {
        margin-bottom: 0;
    }

    .user-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .user-info-left {
            display: flex;
            align-items: center;
            
            img{
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                margin-right: 24rpx;
            }
        }
    }

    .user-name {
        margin-left: 10rpx;
        font-size: 28rpx;
        text-align: left;
        color: #333;
    }

    .comment-content {
        margin: 24rpx 0;
        font-weight: 400;
        font-size: 32rpx;
        line-height: 48rpx;
        text-align: left;
        color: #333;
    }

    .image-container {
        display: flex;
        flex-wrap: wrap;
        // height: 330rpx;
        width: 100%;
        gap: 5rpx; /* 新增间距 */
        .imgInfo{
            width: calc(50% - 5rpx); /* 调整宽度适配间隙 */
            overflow: hidden; /* 防止图片溢出 */
            margin-bottom:10rpx;
        }
        img{
            height: 330rpx;
            width: 100%;
        }
        .imgInfo:nth-child(2n) {
            margin-bottom: 0rpx; /* 调整下间距 */
        }
    }

    // 评论底部信息  发布时间  点赞评论人数
    .comment-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx;
        font-size: 24rpx;
        color: #999;
    }
    .comment-footer .time{
        font-weight: 400;
        font-size: 24rpx;
        text-align: left;
        color: #999;
    }

    .interaction {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 24rpx;
        text-align: left;
        color: #333;
    }

    .more-comments {
        text-align: center;
        margin-top: 40rpx;
        padding-bottom: 114rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 28rpx;
        text-align: left;
        color: #ff6203;
    }
}
// 已报名未参加
.btn-area{
    padding-top:32rpx;
    padding-left:48rpx ;
    padding-right: 48rpx;
    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
    // height: calc(144rpx + env(safe-area-inset-bottom));
    width: calc(100% - 96rpx);
    display: flex;
    z-index: 100;
    justify-content: space-between;
    // background-color: #f9f9f9;
}
.checkBtn{
    background-color: #FF6203;
    border: none;
    border-radius: 50rpx;
    font-size:28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 86rpx;
    line-height: 86rpx;
    // padding-left: 35px;
    // padding-right: 35px;
    width: 45%;
}
.submitBtn{
    // background-color: #FF6203;
    border: 1rpx solid #FF6203;
    border-radius: 50rpx;
    font-size:28rpx;
    text-align: center;
    color: #FF6203;
    height: 86rpx;
    line-height: 86rpx;
    width: 45%;
}
.no-comment{
    margin-top: 40rpx;
    padding-bottom: 114rpx;
    display: flex;
    text-align: center;
}
::v-deep .more-comments .van-icon {
  color: #ff6203;
}
::v-deep .interaction .van-icon {
    margin-right: 8rpx;
    width: 32rpx;
    height: 32rpx;
}

.goodsAction {
    #goodact {
        position: relative;
    }
}

.goods_act_box {
    position: relative;
    background-color: #ffffff;
    height: 72px;
}



.loading {
    text-align: center;
    margin-top: 16px;
    color: #242629;
    font-size: 28rpx;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
}

::v-deep .van-hairline--bottom:after {
    border: none;
}

::v-deep .van-empty__image {
    width: 150px;
    height: 100px;

}

::v-deep .van-goods-action--safe {
    // padding-bottom: none !important;
}
::v-deep .van-goods-action-button__inner {
    font-weight: normal !important;
}
::v-deep .van-goods-action-icon {
   min-width:70rpx !important;
}
.pl15 {
    padding-left: 15px;
}

.l20 {
    margin-left: 20px;
}
.r12{
    margin-right: 12px;
}
.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}

::v-deep .signUpStatus,.activityAddress .van-icon-arrow {
    color: #b3b3b3 !important;
}

::v-deep .van-info {
    background-color: #FF6203;
}
::v-deep .van-button--default {
    height: 44rpx;
    border-radius: 22rpx;
    font-size: 22rpx;
    background: transparent !important;
    border: 1px solid #D4D4D4 !important;
    color: #666666 !important;
}

::v-deep .van-button--primary {
  width: 100%;
  height: 86rpx;
  border-radius: 50rpx;
  background: #ff6203;
  margin-top: 32rpx;
  font-size: 28rpx;
}
// 页面最底部的灰色按钮
::v-deep .bottom .van-button--default {
    margin-top: 32rpx;
    font-size: 28rpx;
    width: 100%;
    height: 86rpx;
    border-radius: 50rpx;
    background: #D4D4D4 !important;
    border: 1px solid #D4D4D4 !important;
    color: #ffffff !important;
}

::v-deep .disabledCheckBtn.van-button--default {
    background: #D4D4D4 !important;
    border-color: #D4D4D4 !important;
    color: #FFFFFF !important;
    opacity: 1;
}
</style>
